<template>
    <div>
    <el-dialog v-model="dialogFormVisible" title="设备详情" width="500">
    <el-form :model="localRowData">
      <el-form-item label="终端号" :label-width="formLabelWidth">
        <el-input v-model="localRowData.id"  />
      </el-form-item>
      <el-form-item label="SN号" :label-width="formLabelWidth">
        <el-input v-model="localRowData.SN"  />
      </el-form-item>
      <el-form-item label="服务开始时间" :label-width="formLabelWidth">
        <el-input v-model="localRowData.startTime"  />
      </el-form-item>
      <el-form-item label="服务结束时间" :label-width="formLabelWidth">
        <el-input v-model="localRowData.endTime"  />
      </el-form-item>
      <el-form-item label="公司名称" :label-width="formLabelWidth">
        <el-input v-model="localRowData.name"  />
      </el-form-item>
      <el-form-item label="设备状态" :label-width="formLabelWidth">
        <el-input :value="localRowData.state === 1 ? '使用中' : '已禁用'"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </template>
  </el-dialog>
    </div>
</template>

<script setup>
import {defineProps,defineEmits,computed,ref,watch} from 'vue' 

const props  = defineProps({
    modelValue:Boolean,
    rowData:Object
})
const emit = defineEmits(['update:modelValue','save']);

const dialogFormVisible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

const formLabelWidth = '120px';

// 创建本地数据副本
const localRowData = ref({ ...props.rowData })

// 监听父组件传递的数据变化
watch(() => props.rowData, (newVal) => {
  localRowData.value = { ...newVal }
})

// 保存处理
const handleSave = () => {
  emit('save', { ...localRowData.value }) // 触发保存事件
  dialogFormVisible.value = false
}
</script>

<style lang="scss" scoped>

</style>